<template>
  <div>
    <!--<x-header :left-options="{showBack: false}" style="background-color: #1D1C1E;color:#999999;font-size: 17px;">首页-->
    <!--</x-header>-->
    <swiper auto height="210px" style="width: 100%;" dots-position="center">
      <swiper-item v-for="img in data.banner" :key="img.banner_id" class="black"><img :src="img.image"
                                                                                      style="width: 100%;height: 100%;">
      </swiper-item>
    </swiper>


    <div style="padding: 10px 0 10px 10px;">
      <div style="display: flex;border-bottom: 1px solid #222225;position: relative;height: 49px;line-height: 49px;"
           class="right-arrow">
        <div style="flex: 1;">楼盘名称</div>
        <!--<popup-picker style="flex: 3;font-size: 16px;color: #8E8E8E;margin-right: 25px;" :data="list2"-->
        <!--v-model="village" @on-change="onChange" @on-hide="onhide"-->
        <!--@on-shadow-change="shouww"></popup-picker>-->
        <select v-model="selected" @change="selectChage"
                style="flex: 3;font-size: 16px;color: #8E8E8E;margin-right: 25px;direction: rtl;background-color: transparent;border: none;"
                :style="{color:selectedColor}">
          <option value='' disabled selected>请选择楼盘名称</option>
          <!--<option value="1">测试</option>-->
          <option v-for="vill in data.village" :value="vill.village_id">{{vill.name}}
          </option>
        </select>
      </div>

      <div style="display: flex;border-bottom: 1px solid #222225;position: relative;height: 49px;line-height: 49px;"
      >
        <div style="flex: 1;">姓名</div>
        <input v-model="data.name" v-bind:style="{color:nameColor}"
               style="flex: 3;background-color: transparent;border: none;font-size: 16px;color: #8E8E8E; text-align: right;
    padding-right: 30px;"
               placeholder="请输入您的姓名">
      </div>

      <div style="display: flex;border-bottom: 1px solid #222225;position: relative;height: 49px;line-height: 49px;"
      >
        <div style="flex: 1;">手机</div>
        <input v-model="data.mobile" type="tel" v-bind:style="{color:telColor}"
               style="flex: 3;background-color: transparent;border: none;font-size: 16px;text-align: right;
    padding-right: 30px;"
               placeholder="请输入您的联系方式">
      </div>

      <div style="display: flex;border-bottom: 1px solid #222225;position: relative;height: 49px;line-height: 49px;"
           class="right-arrow">
        <div style="flex: 1">常住地址</div>

        <select v-model="proSelected" @change="proChage"
                style="font-size: 16px;margin-right: 25px;direction: rtl;background-color: transparent;border: none;"
                :style="{color:selectProColor}">
          <option value='' disabled selected>选择省份</option>
          <!--<option v-for="pro in province" :value="pro.id">{{pro.name}}-->
          <option value="330000">浙江省
          </option>
        </select>

        <select v-model="citySelected" @change="cityChange"
                style="font-size: 16px;margin-right: 25px;direction: rtl;background-color: transparent;border: none;"
                :style="{color:selectCityColor}">
          <option value='' disabled selected>选择城市</option>
          <option v-for="vill in city" :value="vill.id">{{vill.name}}
          </option>
        </select>

        <!--<v-distpicker style="flex: 3;background-color: transparent;text-align: right;" province="" city="" :placeholders="placeholders" @selected="cityselect"-->
        <!--hide-area></v-distpicker>-->
      </div>
    </div>

    <x-button @click.native="reserve()"
              style="margin: 20px auto;width: 187px;background-color: #E8BA82;margin-top: 30px;color: #1C1C1E;margin-bottom: 70px;border-radius: 10px;"
              type="primary">立即预约
    </x-button>


    <!--<div @click.native="select()">城市选择</div>-->
    <!--<v-distpicker province="浙江省" city="杭州市" @selected="cityselect"-->
    <!--hide-area></v-distpicker>-->


    <!--<group title="double columns">-->
    <!--<popup-picker :title="title2" :data="list2" v-model="value2" @on-change="onChange" @on-hide="onhide"-->
    <!--@on-shadow-change="shouww"></popup-picker>-->
    <!--</group>-->

    <!--<div class="list-cont">-->
    <!--<h3>二级城市</h3>-->
    <!--<div class="list-main">-->
    <!--<city-picker :default-city="defaultCity" :level="2" @choice-caller="choiceCallers"></city-picker>-->
    <!--</div>-->
    <!--<p>设置<strong>:default-city</strong>属性来定义默认城市</p>-->
    <!--<p>设置<strong>:level</strong>属性来定义城市的级数</p>-->
    <!--</div>-->

    <tabbar style="position: fixed;background-color: #1D1C1E;">
      <tabbar-item selected>
        <img slot="icon" src="../assets/home.png">
        <img slot="icon-active" src="../assets/home-selected.png">
        <span slot="label" style="color: #E7B986">预约看房</span>
      </tabbar-item>
      <tabbar-item link="/mine">
        <img slot="icon" src="../assets/mine.png">
        <img slot="icon-active" src="../assets/mine-selected.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>

    <div v-if="success" class="bg-opacity" style="position: fixed"></div>

    <div v-if="success"
         style="position: fixed;width: 100%;text-align: center;z-index: 9999;top: 42%;">
      <div
        style="background: #222225;border-radius: 10px;align-items: center;display: flex;width: 180px;height: 60px;text-align: center;margin: 0 auto;">
        <img src="../assets/success.png" style="width: 30px;height: 30px;padding-left: 39px;">
        <div style="padding-left: 10px;">预约成功！</div>
      </div>
    </div>

  </div>
</template>

<script>
  import {Swiper, SwiperItem, Tabbar, TabbarItem, Flexbox, FlexboxItem, Picker, PopupPicker, XButton, Toast} from 'vux'
  import province from '../lib/province'
  import city from '../lib/city'
  import cityPicker from '../components/cityPicker'
  import VDistpicker from 'v-distpicker'
  import wxShare from '../lib/wxShare'

  export default {
    name: 'home',
    components: {
      Swiper,
      SwiperItem,
      Tabbar,
      TabbarItem,
      Flexbox,
      FlexboxItem,
      Picker,
      PopupPicker,
      cityPicker,
      VDistpicker,
      XButton,
      Toast
    },
    data() {
      return {
        data: {},
        selected: '',
        placeholders: {
          province: '选择省份', city: '选择市'
        },
        province: [],
        city: [],
        proSelected: '',
        citySelected: '',
        success: false,
        selectedColor: '#555555',
        selectProColor: '#555555',
        selectCityColor: '#555555',
        telColor: '#555555',
        nameColor: '#555555'
      }
    },
    mounted() {
      let that = this
      document.title = '越龙山国际旅游度假区'
      that.province = province
      console.log(window.location.href)
      let nowUrl = window.location.href
      if (nowUrl.indexOf('code') > 0) {
        var temp = nowUrl.split('code=')[1]
        var wxCode = temp.split('&')[0]
        that.$Cookies.set('code', wxCode)
        that.$http.post('user/info', {}).then(data => {
          that.$Cookies.set('avatar', data.data.data.avatar)
          that.$Cookies.set('nickname', data.data.data.nickname)
          that.$Cookies.set('token', data.data.data.token)
          that.$http.post('index', {}).then(data => {
            console.log(data.data.data)
            that.data = data.data.data
            wxShare()
          })
        })
      } else {
        that.$http.post('index', {}).then(data => {
          console.log(data.data.data)
          that.data = data.data.data
        })
      }
    },
    watch: {
      data: function () {
        console.log('data.mobile ', this.data)
        if (this.data.mobile) {
          this.telColor = '#8E8E8E'
        } else if (this.data.name) {
          this.nameColor = '#8E8E8E'
        }
      }
    },
    methods: {
      weChatConfig: function () {
        //this.$wechat.config(JSON.parse(response.data.data))
      },
      selectChage: function () {
        console.log(this.selected)
        if (this.selected) {
          this.selectedColor = '#8E8E8E'
        }
      },

      proChage: function () {
        this.city = city[this.proSelected]
        if (this.proSelected) {
          this.selectProColor = '#8E8E8E'
        }
        console.log(this.city)
      },
      cityChange: function () {
        if (this.citySelected) {
          this.selectCityColor = '#8E8E8E'
        }
      },
      // 预约
      reserve: function () {
        let that = this
        if (!that.selected) {
          return that.$vux.toast.text('请选择楼盘名称')
        }

        let reg = /^[\u4E00-\u9FA5]+$/
        if (reg.test(that.data.name)) {
          if (that.data.name.length < 2) {
            return that.$vux.toast.text('姓名不能少于两位')
          }
          if (that.data.name.length > 15) {
            return that.$vux.toast.text('姓名不能多于15位')
          }
        } else {
          if (/\s+/.test(name)) {
            return that.$vux.toast.text('姓名不能包含空格')
          } else {
            return that.$vux.toast.text('请输入中文姓名')
          }
        }

        if (that.data.mobile) {
          var regTel = /^[1][3456789]\d{9}$/;
          if (!regTel.test(that.data.mobile)) {
            return that.$vux.toast.text('手机号码输入有误')
          }
        } else {
          return that.$vux.toast.text('手机号不能为空')
        }

        if (!that.proSelected) {
          return that.$vux.toast.text('请选择省份')
        }

        if (!that.citySelected) {
          return that.$vux.toast.text('请选择城市')
        }

        let params = {
          village_id: that.selected,
          user_name: that.data.name,
          mobile: that.data.mobile,
          province: that.proSelected,
          city: that.citySelected
        }

        that.$http.post('reserve', params).then(data => {
          if (data.data.errno == 0) {
            that.success = true
            setTimeout(function () {
              that.success = false
            }, 3500)
          } else {
            that.$vux.toast.text(data.data.errmsg)
          }
        })
      },
      onChange: function (val) {
        console.log('value2 ', this.list2[1])
        this.list2[1] = ['a', 'b', 'c']
        console.log(this.list2)
      },
      onhide: function (val) {
        console.log('onhide ', val)
      },
      shouww: function (val) {
        console.log('shouww ', val)
      },
      cityselect: function (val) {
        console.log('cityselect', val)
        this.data.province = val.province.code
        this.data.city = val.city.code
      },
      change(value) {
        console.log('new Value', value)
      }
      ,
      choiceCallers(values) {
        console.log('选择的城市：' + values)
      }
    }
  }
</script>

<style scoped>

  .home-vip {
    background-color: #fff;
    width: auto;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #eee;
  }

  .right-arrow::before {
    content: " ";
    display: inline-block;
    height: 9px;
    width: 9px;
    border-width: 1px 1px 0 0;
    border-color: #C8C8CD;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: 15px;
  }

  .vux-cell-box:not(:first-child):before {
    display: none;
  }

  .weui-cell_access .weui-cell__ft:after {
    display: none !important;
  }

  .distpicker-address-wrapper select {
    background-color: transparent !important;
  }

  .bg-opacity {
    background-color: rgba(0, 0, 0, 0.9);
    position: fixed;
    top: 0px;
    left: 0px;
    opacity: 0.318;
    z-index: 100;
    width: 100%;
    height: 100%;
  }

  .weui-tabbar:before {
    border-top: 0 !important;
  }

  /*input[placeholder], [placeholder], *[placeholder] {*/
  /*color:red !important;*/
  /*}*/
  input:-moz-placeholder,
  textarea:-moz-placeholder {
    color: #555555;
  }

  input:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
    color: #555555;
  }

  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    color: #555555;
  }

</style>
